<template>
    <div>
        <h4>vue3中css新特性</h4>
        <div>
            我是插槽:
            <slot></slot>
        </div>
        <hr>
         <div class="dymicCls" @click="changeColor">我是动态样式,点我改变</div>
         <hr>
         <div :class="$style.moduleCls">
            css module1
         </div>
         <div :class="mg.moduleCls2">
            css module2
         </div>
    </div>
   
</template>
 
<script lang="ts" setup>
import { reactive, ref, useCssModule } from 'vue';
let dymicColor = ref('red');
let dymicColorbg = reactive({
    color: 'pink'
});

let changeColor = () => {
    if (dymicColor.value === 'red') {
        dymicColor.value = 'blue';
    } else {
        dymicColor.value = 'red';
    };

    if (dymicColorbg.color === 'pink') {
        dymicColorbg.color = 'orange';
    } else {
        dymicColorbg.color = 'pink';
    }
}


// 与组合式 API 一同使用

// 注入的类可以通过 useCssModule API 在 setup() 和 <script setup> 中使用。
// 对于使用了自定义注入名称的 <style module> 模块，useCssModule 接收一个对应的 module attribute 值作为第一个参数
let mgstyle = useCssModule('mg');
console.log('mgstyle====>', mgstyle.moduleCls2)
</script>
    
<style  scoped lang="less">
/* 在组件内部去定义卡槽的自定义内容的样式是无效的 */
    .NewcssStyle-a {
        color: red;
    }
    /* 这样是有效的 */
    :slotted(.NewcssStyle-a) {
        color: blue;
    }
    /* 或者将它加到全局样式也是可以的 */
    :global(.NewcssStyle-a) {
        background-color: beige;
    }

    /* 也支持动态样式 */
    .dymicCls {
        color: v-bind(dymicColor);
        background-color: v-bind('dymicColorbg.color');
    }
</style>

<style  scoped lang="less" module>
    // css module  <style module> 标签会被编译为 CSS Modules 并且将生成的 CSS 类作为 $style 对象的键暴露给组件
    .moduleCls{
        color: aqua;
    }
</style>

<style  scoped lang="less" module='mg'>
    // css module  可以自定义名称
    .moduleCls2{
        color: rgb(0, 255, 30);
    }
</style>